<template>
    <div class="wrapper-product">   
        <p style="font-size:36px;padding:15px;">商品管理</p>
        <el-button type="primary" style="float:right" @click="add">添加</el-button>
        <search @search="searchs" :options="options"></search>
        <Tables 
            :pageNum="pageNum" 
            :pageSize="pageSize" 
            :total="total" 
            :cols="cols" 
            :data="tableData"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            >
            <template v-slot:tab="{row}">
               <el-tag type="warning" @click="editStatus(row.status,row.id)">{{row.status==1 ? '下架':'上架'}}</el-tag>
            </template>
            <template v-slot:action="{row}">
                <el-button type="primary" size="mini" @click="lookup(row.id)">查看</el-button>
                <el-button type="primary" size="mini" @click="edit(row.id)">编辑</el-button>
            </template>
        </Tables>
    </div>
</template>

<script>
import { getProductList,editStatu,getSearch } from "../../../http/index.js";
import Tables from "../../common/table.vue";
import search from "../../common/search.vue";

export default {
    components: { Tables ,search},
  data() {
    return {
        tableData:[],
        total:0,
        pageSize: 10,
        options: [
        {
          value: "id",
          label: "按id进行搜索"
        },
        {
          value: "name",
          label: "按名称进行查找"
        },
      ],
        pageNum: 1,
        cols: [
        {
          label: "id",
          name: "id"
        },
        {
          label: "信息",
          name: "name"
        },
        {
          label: "价格",
          name: "price"
        },
        {
          label: "状态",
          name: "status",
          slot: "tab"
        },
        
        {
          label: "操作",
          name: "attress",
          slot: "action"
        }
      ]
    };
  },
  mounted() {
    this.getProduct();
  },
  methods: {
    async getProduct() {
      let res =await getProductList({
        pageSize: this.pageSize,
        pageNum: this.pageNum
      });
       console.log(res);
      this.tableData = res.data.data.list;
      this.total = res.data.data.total;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(this.pageSize);
      getProductList({ pageSize: this.pageSize }).then(res => {
        console.log("111", res);
        this.tableData = res.data.data.list;
      });
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      console.log(this.pageNum);
      getProductList({ pageNum: this.pageNum }).then(res => {
        console.log("222", res);
        this.tableData = res.data.data.list;
      });
    },
    async searchs(val,keyword){
        console.log(val);
        if(val=='id'){
            let res =await getSearch({productId:keyword});
            console.log('id',res);
            this.tableData=res.data.data.list
        }else{
            let res =await getSearch({productName:keyword});
            console.log('name',res);
            this.tableData=res.data.data.list
        }
    },
    editStatus(val,id){
      let status=0;
        if(val==1){
            status=0
        }else{
            status=1
        }
        this.$confirm('此操作将上架或下架该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          editStatu({productId:id,status:status}).then(res=>{
            this.getProduct();
            this.$message({
              type: 'success',
              message: res.data.data.msg
            });
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    add(){
        this.$router.push('/addlist')
    },
    lookup(val){
      this.$router.push({path:'/details',query:{lookid:val}})
      console.log(val);
    },
    edit(val){
      this.$router.push({path:'/edit',query:{id:val}})
    }
  }
};
</script>

<style lang="scss" scoped>

</style>